<template>
	<view class="page">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<!-- 1 -->
				<swiper-item>
						<view class="banner">
							<image class="banner-img" src="../../static/img/2.jpg"></image>
							<view class="banner-title">
								<view class="banner-hot">
									<image src="../../static/img/hot-1.png"></image>
									<text>热点</text>
								</view>
								<view class="banner-text">
								房产税石锤！2023年之前出台，普通青年们如何应对楼市巨变
								</view>
								</view>
						
						</view>
				</swiper-item>
				<!-- 2 -->
				<swiper-item>
					<view class="banner">
						<image class="banner-img" src="../../static/img/2.jpg"></image>
						<view class="banner-title">
							<view class="banner-hot">
								<image src="../../static/img/hot-1.png"></image>

								<text>热点</text>
							</view>
							<view class="banner-text">
							<text>滴滴停运了，可我们还是要打车,还能怎么办！</text>
							</view>
							</view>
					
					</view>
				</swiper-item>
				<!-- 3 -->
				<swiper-item>
					<view class="banner">
						<image class="banner-img" src="../../static/img/2.jpg"></image>
						<view class="banner-title">
							<view class="banner-hot">
							<image src="../../static/img/hot-1.png"></image>

								<text>热点</text>
							</view>
							<view class="banner-text">
							那些像龙哥一样的不良少年，后来都怎么样了？
							</view>
							</view>
					
					</view>
				</swiper-item>
			</swiper>
		
		
		<!-- 头部 -->
		
		
		<view class="uni-list" @tap="navigateTo">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
				<view class="uni-media-list">
					<image class="uni-media-list-logo" src="../../static/img/3.png"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">百度：如遇假冒、钓鱼欺诈等网站，不设上限进行“全额”保障</view>
						<view class="uni-media-list-text-bottom">
							<text>#科技创新#</text>
							
							<text>18:17</text>
						</view>
					</view>
				
					
				</view>
			</view>
		</view>
		
		
		<view class="uni-list">
			<!-- 1 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
				<view class="uni-media-list">
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">上海楼市后半场：城区二手房降价8次共30万元无人问津，回暖遥遥无期</view>
						<view class="uni-media-list-text-bottom">
							<view>
								<text>#宏观经济#</text>
							</view>
							<view>
							<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
							<text>1817</text>
							</view>
						</view>
					</view>
					<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
					
				</view>
			</view>
			<!-- 2 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
				<view class="uni-media-list">
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">中弘退市旋涡：半年亏损13亿离职潮与要账潮此起披伏，出路难寻</view>
						<view class="uni-media-list-text-bottom">
							<view>
								<text>#公司大佬#</text>
							</view>
							<view>
							<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
							<text>8888</text>
							</view>
						</view>
					</view>
					<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
					
				</view>
			</view>
			
	  </view>
	
	<!-- 精选音频 -->
	<view class="uni-list">
		<view class="uni-list-select"> 
		<image src="../../static/img/qq.png"></image>
		 精选音频
		<view class="uni-list-cell-navigate uni-navigate-right"></view>
		 </view>
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			
			
			<view class="uni-media-list">
				
				<view class="uni-media-list-body">
					<view>
					<view class="uni-media-list-text-top" style="width: 65%;float: left;margin-top: 35px;">百度：如遇假冒、钓鱼欺诈等网站，不设上限进行“全额”保障 </view>
					<image class="uni-media-list-logo-right" src="../../static/img/3.png"></image>
					</view>
					
					<view class="uni-media-list-text-bottom">
						<view>
							<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
							<text>#陆家嘴雪姨#</text>
						</view>
						<view class="uni-img-share" >
						<view class=".uni-icon uni-icon-redo"></view>
						<text>分享</text>
						</view>
						
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 茶水间 -->
	<view class="uni-list">
		<view class="uni-list-select"> 
		<image src="../../static/img/qq.png"></image>
		茶水间
		<view class="uni-list-cell-navigate uni-navigate-right"></view>
		</view>
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
				  <image style="width: 100%;" src="../../static/img/2.jpg"></image>
				</view>
			</view>
		</view>
	</view>
	<view class="uni-list">
		<!-- 1 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">有钱人骑共享单车健身是消费升级？专家言论再遭批，升降与否该看大众</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#宏观经济#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>9401</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		
		
	</view>
	
	<!-- 视觉新闻 -->
	<view class="uni-list">
		<view class="uni-list-select"> 
		<image src="../../static/img/qq.png"></image>
		视觉新闻
		<view class="uni-list-cell-navigate uni-navigate-right"></view>
		</view>
		<view class="uni-list-visual">
		<image style="width: 100%;" src="../../static/img/2.jpg"></image>
		<view class="uni-list-visual-num">
			35张
		</view>
		
        </view>
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >

			
			<view class="uni-media-list">
				
				<view class="uni-media-list-body">
					<view>
					<view class="uni-media-list-text-top" style="width: 100%;float: left;margin-top: 10px;">
						西门瑶维密一摔成免试，真正的天使却落选！维密免试的内幕居然是这样......
						</view>
					</view>
					
					<view class="uni-media-list-text-bottom">
						<view>
							<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
							<text>#八卦漫谈#</text>
						</view>
						<view class="uni-img-share">
						<view class=".uni-icon uni-icon-redo"></view>
						<text>分享</text>
						</view>
						
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
	
	<view class="uni-list">
		<!-- 1 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						中国人财富的变迁：酣战通畅四十年，从只相信储蓄到选择庞氏骗局
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#宏观经济#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>19401</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		
		
	</view>
	
	<!-- 专题 -->
		<view class="uni-list">
			<view class="uni-list-select"> 
			<image src="../../static/img/qq.png"></image>
			专题.大强子的京东艳闻史
			<view class="uni-list-cell-navigate uni-navigate-right"></view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view id="demo1" class="scroll-view-item_H ">
						<view style="padding:5px 0 5px 40px;  background: #F6F6F6;">
							<view style="margin:10px 10px; background: #FFFFFF;">
							<view class="uni-list-visual-special">
							<image style="width: 100% ;height: 300px;" src="../../static/img/s.png"></image>
							</view>
							<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
								<view class="uni-media-list">
									<view class="uni-media-list-body ">
										<view>
										<view class="uni-media-list-text-top">
											奶茶妹妹被“绿”？刘强东被传在美性侵女大学生被拘，京东辩称遭诬告
											</view>
										</view>
										
										<view class="uni-media-list-text-bottom" style="margin-top: 55px;">
											<view>
												<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
												<text>#八卦漫谈#</text>
											</view>
											<view>
											<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
											<text>8888</text>
											</view>
										</view>
									</view>
								</view>
							</view>	
							</view>
							</view>
							</view>
				<view id="demo2" class="scroll-view-item_H ">
					<view style="padding:5px 0 5px 40px;  background: #F6F6F6;">
						<view style="margin:10px 10px; background: #FFFFFF;">
						<view class="uni-list-visual-special">
						<image style="width: 100% ;height: 300px;" src="../../static/img/s.png"></image>
						</view>
						<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
							<view class="uni-media-list">
								<view class="uni-media-list-body ">
									<view>
									<view class="uni-media-list-text-top">
										京东辩称遭诬告
										</view>
									</view>
									
									<view class="uni-media-list-text-bottom" style="margin-top: 55px;">
										<view>
											<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
											<text>#八卦漫谈#</text>
										</view>
										<view>
										<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
										<text>8888</text>
										</view>
									</view>
								</view>
							</view>
						</view>	
						</view>
						</view>
				</view>
				<view id="demo3" class="scroll-view-item_H ">
						<view style="padding:5px 0 5px 40px;  background: #F6F6F6;">
							<view style="margin:10px 10px; background: #FFFFFF;">
							<view class="uni-list-visual-special">
							<image style="width: 100% ;height: 300px;" src="../../static/img/s.png"></image>
							</view>
							<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
								<view class="uni-media-list">
									<view class="uni-media-list-body ">
										<view>
										<view class="uni-media-list-text-top">
											奶茶妹妹被“绿”？刘强东被传在美性侵女大学生被拘，京东辩称遭诬告
											</view>
										</view>
										
										<view class="uni-media-list-text-bottom" style="margin-top: 55px;">
											<view>
												<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
												<text>#八卦漫谈#</text>
											</view>
											<view>
											<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
											<text>8888</text>
											</view>
										</view>
									</view>
								</view>
							</view>
								
							</view>
							</view>
					</view>
			</scroll-view>
			
		</view>
		
	<view class="uni-list">
		<!-- 1 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						ofo融资再现迷局：在滴滴与阿里虎视眈眈下，戴危的底线还能撑几何
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#公司大佬#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>1817</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 2 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						一个制造业老板的自白：倾注20多年心血的工厂，出租了
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#社会百态#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 3 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						博士把10年本硕博生涯写成"研究综述"，用物理学原理分析体重变化						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#社会百态#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		
	</view>
	
<!-- 精选视频 -->
	<view class="uni-list">
		<view class="uni-list-select"> 
		<image src="../../static/img/qq.png"></image>
		精选视频
		<view class="uni-list-cell-navigate uni-navigate-right"></view>
		</view>
		<view class="uni-list-visual">
		<video style="width: 100%;" id="myVideo" src="https://www.dcloud.io/uniapp/wap2appvsnative.mp4" @error="videoErrorCallback" :danmu-list="danmuList"
			enable-danmu danmu-btn controls>
		</video>
		
		
        </view>
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >

			
			<view class="uni-media-list">
				
				<view class="uni-media-list-body">
					
					<view class="uni-media-list-text-top" >
						投资自己
					</view>
					
					<view class="uni-media-list-text-bottom">
						<view>
							<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
							<text>#八妹实验室#</text>
						</view>
						<view class="uni-img-share">
						<view class=".uni-icon uni-icon-redo"></view>
						<text>分享</text>
						</view>
						
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>	
	
	
	
	<!-- 热文遍历 -->
	<view class="uni-list">
		<!-- 1 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						多家直销银行卖P2P产品：5%低收益却要用户承担风险，但仍难挡融资
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#金融市场#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>1817</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 2 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						全球通货膨胀蔓延：委内瑞拉捧着石油金碗吃不上饭，中国是否布人后尘
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#宏观经济#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 3 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						中国互联网裁员潮来袭：企业中年危机难解决，劳务派遣或成最适合模式			</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#科技创投#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 4 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						百度又开始吃“人血馒头”？搜索知名医院却引入山寨，患者遭过度治疗
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#公司大佬#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 5 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						朋友圈里全是人设？不经意的炫耀会降低自己的满意度，越来越多人选择逃离
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#社会百态#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 6 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						年轻人是如何“垮掉”的：90后所有的叛逆最后都变成了平庸
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#社会百态#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		<!-- 7 -->
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
			<view class="uni-media-list">
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">
						房产税实锤！2023年之前出台，无脑买房就赚大钱的时代已经结束
						</view>
					<view class="uni-media-list-text-bottom">
						<view>
							<text>#宏观经济#</text>
						</view>
						<view>
						<image class="img-eyes" src="../../static/img/sinaweibo.png" mode=""></image>
						<text>8888</text>
						</view>
					</view>
				</view>
				<image class="uni-media-list-logo-right" src="../../static/img/s.png"></image>
				
			</view>
		</view>
		
	</view>
	
	
	
	
	</view>
</template>

<script>
	import pageHead from '../../components/page-head.vue'


        // 横向滚动
	export default {
		data() {
			return {
				// 横向滚动
				order: ['demo1', 'demo2', 'demo3'],
				// 头部轮播
				indicatorDots: true,
				vertical: false,
				autoplay: false,
				interval: 4000,
				duration: 500
			}
		},
		
		methods: {
			
			navigateTo: function () {
				uni.navigateTo({
					url: 'index-detail/index-detail'
				})
			},
			// 横向滚动
			upper: function (e) {
				console.log(e)
			},
			lower: function (e) {
				console.log(e)
			},
			scroll: function (e) {
				console.log(e)
			},
			
			// 头部轮播
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		},
		components: {
			pageHead
		}
	}
	
	
</script>

<style>
	@import "../../common/icon.css";
	@import "../../common/uni.css";

	page {
		background: #f6f6f6;
	}
	/* 轮播 */
   /* 头部照片 */
   swiper{ 
   height:420px;
   }
	.banner {
		height: 420px;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	.banner-title {
		width: 100%;
		max-height: 84px;
		overflow: hidden;
		position: absolute;
		left: 30px;
		bottom: 50px;
		font-size: 32px;
		font-weight: 400;
		line-height: 42px;
		color: white;
		z-index: 11;
	}
	.banner-hot{
		margin-top: 15px;
		margin-right: 5% ;
		width: 20%;
		float: left;
		height: 60px;
		border-radius:25px ;
		font-size: 30px;
		background: -webkit-linear-gradient(left, #ee7a47 , #c9230b); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #ee7a47 , #c9230b); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right,#ee7a47 , #c9230b); /* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #ee7a47 , #c9230b); /* 标准的语法 */
		}
		
	.banner-hot image{
		width: 36px;
		height: 36px;
		margin-left: 15px;
		margin-right: 8px;
		margin-top: 12px;
		}
		.banner-hot text{
			position: absolute;
			top: 25%;
			left: 8%;
	}
	.banner-text{
		width: 70%;
		height: 80px;
		overflow: visible;
		float: left;
	}
	
	
	/* 新闻 */
        .uni-list{
			margin-top: 25px;
		}
	
		.uni-media-list-logo {
			width: 220px;
			height: 220px;
		}
		/* 各导航标题 */
		.uni-list-select{
			padding: 10px 30px;
			font-size: 38px;
			font-weight: bold;
			}
			.uni-list-select image{
				
					float: left;
					margin-right: 10px;
					width: 50px;
					height: 50px;
				}	
		.uni-list-select view{
			    float: right;
				width: 50px;
				height: 50px;
			}	
		
		.uni-list-cell-navigate{
			font-size: 38px;
		}
		/* 分享 */
		.uni-img-share{
			position:absolute;
			right:170px;
			}
		/* 小图片 */
		.img-eyes{
		    margin-bottom: -5px;
			margin-right: 10px;
			width: 30px;
			height: 30px;
		}
		/* 分享小图片 */
		.uni-img-share .uni-icon{
			position: absolute;
			bottom: 6px;
			right: 78px;
			width: 30px;
			height: 30px;
		}
	.uni-media-list-logo-right{
		width: 220px;
		height: 220px;
	}
		.uni-media-list-body {
			height: auto;
			justify-content: space-around;
		}
		.uni-media-list-text-top {
			height: 74px;
			font-size: 32px;
			overflow: visible;
			white-space: normal;
		}
		 
		.uni-media-list-text-bottom {
			margin-top: 25px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		/* 视觉新闻 照片*/
		.uni-list-visual{
			position: relative;
			padding: 22px 30px;
		}
		.uni-list-visual-num{
			width: 15%;
			height: 50px;
			text-align: center;
			border: 2px solid #FFFFFF;
			border-radius: 25px;
			position: absolute;
			color: #FFFFFF;
			bottom: 65px;
			right:65px ;
			
			}
			/* 专题 */
			.uni-list-visual-special{
				padding: 10px 10px;
				}
			/* 横向滚动 */
				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
				}
				.scroll-view-item_H {
					display: inline-block;
					width: 66.6%;
				}
				
</style>
